<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆圈进度</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/radial.css"/>
	</head>
	<body>
		<!-- 插件 start -->
		<div id="indicatorContainer"></div>
		<!-- 插件 end -->
		
		<!-- canvas start -->
		<canvas class="process" width="48px" height="48px">canvas61%</canvas> 
		<!-- canvas end -->
		
		<!-- css1 start -->
		<div class="circle" style="left:0">
			<div class="pie_left"><div class="left"></div></div>
			<div class="pie_right"><div class="right"></div></div>
			<div class="mask"><span>0</span>%</div>
		</div>
		<div class="circle" style="left:220px">
			<div class="pie_left"><div class="left"></div></div>
			<div class="pie_right"><div class="right"></div></div>
			<div class="mask"><span>13</span>%
				<p>预期年化率</p>
				<a class="order-btn" href="javascript:;">立即抢购</a>
			</div>
		</div>
		<div class="circle" style="left:440px">
			<div class="pie_left"><div class="left"></div></div>
			<div class="pie_right"><div class="right"></div></div>
			<div class="mask"><span>30</span>%</div>
		</div>
		<div class="circle" style="left:660px">
			<div class="pie_left"><div class="left"></div></div>
			<div class="pie_right"><div class="right"></div></div>
			<div class="mask"><span>60</span>%</div>
		</div>
		<div class="circle" style="left:880px">
			<div class="pie_left"><div class="left"></div></div>
			<div class="pie_right"><div class="right"></div></div>
			<div class="mask"><span>90</span>%</div>
		</div>
		<!-- css1 end -->
		
		<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
		<script src="js/radialIndicator.js"></script>
		<script type="text/javascript">
			// 插件
			$('#indicatorContainer').radialIndicator({
		        barColor: '#87CEEB',
		        barWidth: 10,
		        initValue: 40,
		        roundCorner : true,
		        percentage: true
		    });
		    
		    // canvas
		    function drawProcess() {
			    $(".process").each(function(){
			    	var $this = $(this);
			    	var txt = $this.text();
			    	
			    	var canvas = this;
			    	var context = canvas.getContext('2d');
			    	
			    	// 画灰色圆圈
			    	context.clearRect(0,0,48,48);
			    	context.beginPath();
			    	context.moveTo(24,24);
			    	context.arc(24,24,24,0,Math.PI*2,false);
			    	context.closePath();
			    	context.fillStyle = "#ddd";
			    	context.fill();
			    	
			    	// 圆进度
			    	var process = 24;
			    	context.beginPath();
			    	context.moveTo(24,24);
			    	context.arc(24, 24, 24, 0, Math.PI * 2 * process / 100, false);
			    	context.closePath();
			    	context.fillStyle = '#e74c3c';
			    	context.fill();
			    	
			    	// 画内部空白  
			        context.beginPath();  
			        context.moveTo(24, 24);  
			        context.arc(24, 24, 21, 0, Math.PI * 2, true);  
			        context.closePath();  
			        context.fillStyle = 'rgba(255,255,255,1)';  
			        context.fill();
			        
			        // 画一条线  
			        context.beginPath();  
			        context.arc(24, 24, 18.5, 0, Math.PI * 2, true);  
			        context.closePath();  
			        // 与画实心圆的区别,fill是填充,stroke是画线  
			        context.strokeStyle = '#ddd';  
			        context.stroke();  
	          
	            	//在中间写字  
			        context.font = "bold 9pt Arial";  
			        context.fillStyle = '#e74c3c';  
			        context.textAlign = 'center';  
			        context.textBaseline = 'middle';  
			        context.moveTo(24, 24);  
			        context.fillText(txt, 24, 24);  
			    })
			 }
		    drawProcess();
		    
		    $(function(){
		    	// css1
		    	$('.circle').each(function(index, el) {
					var num = $(this).find('span').text() * 3.6;
					if (num<=180) {
						$(this).find('.right').css('transform', "rotate(" + num + "deg)");
					} else {
						$(this).find('.right').css('transform', "rotate(180deg)");
						$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
					};
				});
		    })
		</script>
	</body>
</html>
